
import { Card, Flex } from "@/components/base";
import { Typography } from "@/components/typography";
import Icon from "@ant-design/icons";
import I001 from '../../icons/I001.svg?react';

const { Text } = Typography;

/** 客户信息 */
export function CustomerInfo() {
    return (
        <Card style={{ width: '100%' }}>
            <Flex justify="space-between">
                <Text size={16} strong style={{ display: 'block', marginBottom: '16px' }} >
                    <Icon component={I001} style={{ marginRight: 6, color: 'var(--adm-color-primary)' }} />
                    客户信息
                </Text>
            </Flex>
            <Flex wrap="wrap" >
                <Attribute label="客户姓名" value="张三" />
                <Attribute label="客户地址" value="北京市海淀区" />
                <Attribute label="会员等级" value="普通" />
                <Attribute label="积分" value="1000" />
                <Attribute label="客户电话" value="13800138000" />
            </Flex>
        </Card>
    )
}


/** 属性 */
function Attribute(props: {
    label: string;
    value: string;
    width?: string | number;
}) {
    return (
        <Flex vertical style={{ width: props.width || '50%', marginBottom: 10 }}>
            <Text size={12} >{props.label}</Text>
            <Text size={14} strong >{props.value}</Text>
        </Flex>
    )
}